<template>
	<view class="">
		<view class="tableStyleWP">
			<view class="tableStyleMain">
				<view class="tableStyleItem" v-for="(item,index) in membersList" :key="index"
					:style="{transform:item.ui_position,zIndex: index===personIndex?9:1,transition:transition?'all .5s':''}"
					@tap="clickItem(item,index)">
					<view class="tableItemImgWp">
						<img :src="item.head" alt="" :class="{mainSeat: index==0?true:false}">
						<view class="popup" v-if="index===personIndex &&index!=0">
							<view class="buttonItem remark" @tap.stop="handleAddMembers(item,index)"
								v-if="!item.friendOpenId">
								手动添加
							</view>
							<view class="buttonItem seletUser" @tap.stop="showGuestList(item,index)"
								v-if="!item.friendOpenId||item.friendOpenId!==userInfo.openId">
								{{!item.friendOpenId?'选择好友':'变更'}}
							</view>
							<view class="buttonItem seletUser" @tap.stop="delGuest(item,index)"
								v-if="item.friendOpenId && item.friendOpenId!==userInfo.openId">
								删除
							</view>
							<view class="buttonItem seletUser" @tap.stop="setNotice(item,index,1)"
								v-if="item.isNotice!=1 && item.friendOpenId && item.friendOpenId!==userInfo.openId && item.createType==0">
								通知
							</view>
							<view class="buttonItem seletUser" @tap.stop="setNotice(item,index,0)"
								v-if="item.isNotice==1 && item.friendOpenId && item.friendOpenId!==userInfo.openId && item.createType==0">
								不通知
							</view>
						</view>
					</view>

					<view class=" name">
						{{item.name?item.name:'待定'}}
						<u-icon name="lock-fill" color="#ff0000" size="30rpx"
							v-if="item.isNotice==0 && item.friendOpenId && item.friendOpenId!==userInfo.openId">
						</u-icon>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex'
	export default {
		props: {
			maxCount: {
				type: Number,
				required: true
			},
			membersList: {
				type: Array,
				required: true
			},
			isEdit: {
				type: Boolean,
				default: false
			},
			onlyShowInfo: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				defaultHead: 'https://file.casugn.com/storecompcard//5M1g8pXTs7vzebb3f022d3497573ddfd36ef60b87ef3_1663224511371.webp',
				placeHolderUserObj: {
					name: '待定',
					head: 'https://file.casugn.com/storecompcard//5M1g8pXTs7vzebb3f022d3497573ddfd36ef60b87ef3_1663224511371.webp',
					isNotice: 1
				},
				personIndex: -1, // 当前操作的座位下标
				guestIndex: -1,
				transition: true,
				isDel: false
			}
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {
			clickItem(item, index) {
				if (this.onlyShowInfo) {
					return false
				}
				console.log(item, index);
				this.personIndex = this.personIndex === index ? -1 : index
			},
			//选择名片夹
			showGuestList(item, index) {
				//判断是否是只读
				if (this.onlyShowInfo) {
					return false
				}
				this.personIndex = -1
				this.guestIndex = index
				this.$emit('showGuestList', {
					item,
					index
				})
			},
			delGuest(item, index) {
				console.log(item, '删除时item信息');
				let defaultItem = {
					...this.placeHolderUserObj,
					ui_position: item.ui_position
				}
				this.isDel = true
				this.personIndex = -1 //隐藏弹窗
				this.$emit('delPerson', {
					index,
					data: defaultItem
				})
			},
			setNotice(item, index, type) {
				console.log(item, 'item');
				if (type == 0) {
					uni.showToast({
						title: '已取消通知'
					})
				}
				if (type == 1) {
					uni.showToast({
						title: '通知该宾客'
					})
				}

				let data = Object.assign(item, {
					isNotice: type
				})
				this.personIndex = -1 //隐藏弹窗
				this.$emit('setPartyPersonList', {
					index,
					data
				})
			},
			//手动添加
			handleAddMembers(item, index) {
				if (this.onlyShowInfo) {
					return false
				}
				this.personIndex = -1
				this.guestIndex = index
				let userName = ""
				//创建组局人员info
				function randomString(e) {
					e = e || 32;
					var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
						a = t.length,
						n = "";
					for (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
					return n
				}
				uni.showModal({
					title: '请输入待定宾客姓名',
					editable: true,
					success: (res) => {
						if (res.confirm && res.content) {
							if (!res.content) {
								return uni.showToast({
									title: '未输入宾客姓名',
									icon: 'error'
								});
							}
							let id = randomString(20)
							let guestInfo = {
								createType: 1,
								id, //模拟数据
								// openId: id, //模拟数据
								friendOpenId: id, //模拟数据
								userName: res.content,
								name: res.content,
								head: this.defaultHead,
								photo: this.defaultHead,
								ui_position: item.ui_position,
							}
							//编辑组局时手动添加的人员删除id
							if (this.isEdit) {
								delete guestInfo.id
							}
							this.$emit('setPartyPersonList', {
								index,
								data: guestInfo
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
							userName = ''
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	v-deep .u-popup {
		flex: 0 !important;
	}

	.remarkBody {
		padding: 30rpx 50rpx;
		background-color: #fff;

		.title {
			width: 100%;
			height: 80rpx;
			line-height: 60rpx;
			text-align: center;
		}

		.makeSurebutton {
			width: 200rpx;
			margin: 30rpx auto 0;
		}
	}

	.tableStyleWP {
		margin: 0 auto;
		width: 600upx;
		height: 600upx;
		// background-color: rgb(255, 195, 195);
		// padding: 100upx;
		display: flex;
		justify-content: center;
		align-items: center;

		.tableStyleMain {
			background: url('https://file.casugn.com/storecompcard/temp/桌子@2x_1655955381924.png') no-repeat 43% 46%;
			background-size: 300upx 300upx;
			width: 500upx;
			height: 500upx;
			position: relative;

			.tableStyleItem {
				position: absolute;
				/* left: 50%; */
				transform-origin: 0px 0px;
				// width: 80upx;

				.tableItemImgWp {
					position: relative;

					img {
						width: 80upx;
						height: 80upx;
						border-radius: 10rpx;
					}

					.mainSeat {
						border: 4px solid #fcc307;
					}

					.popup {
						padding: 10rpx 20rpx;
						background-color: #fff;
						border-radius: 10rpx;
						position: absolute;
						top: -72rpx;
						left: 50%;
						z-index: 9;
						display: flex;
						font-size: 22rpx;
						color: #fff;
						box-shadow: 0px 1px 4px 0px rgba(66, 60, 254, 0.4);
						transform: translateX(-50%);
						// margin-left: -50%;

						.buttonItem {
							padding: 8rpx 13rpx;
							background-color: #feab57;
							border-radius: 6rpx;
							white-space: nowrap;
							margin-right: 15rpx;

							&:last-of-type {
								margin-right: 0;
							}
						}
					}
				}

				.name {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26upx;
					text-align: center;
				}
			}
		}
	}
</style>